<template>
    <view class="content">
        <van-popup position="bottom" @click-overlay="closePopup" :show="show" round
            custom-style="width: 100%;background:#ffffff;overflow: hidden;height:50%">
            <view class="popup-content">
                <view class="popup-main">
                    <view style="display: flex; justify-content: space-between;">
                        <!-- 弹窗标题 -->
                        <view class="title"> 评价详情</view>
                        <!-- 关闭弹窗按钮 -->
                        <view>
                            <van-icon name="cross"  size="15" @click="closePopup" />
                        </view>
                    </view>
                    <scroll-view class="scroll-content " scroll-y :lower-threshold="120" show-scrollbar="false">
                        <view class="judgeContent">
                            <view class="judgeDate">04-12 20:30</view>
                            <view class="judgeDetailText">
                                阿姨厨艺精湛，择菜、洗菜都很利索，做的饭菜色香味俱全，做
                                完饭还把厨房收拾的很干净。阿姨厨艺精湛，择菜、洗菜都很利索，做的饭菜色香味俱全，做
                                完饭还把厨房收拾的很干净。
                            </view>
                            <view class="judgePics">
                                <view class="judge_img_item" v-for="(ele, val) in pics" :key="val">
                                    <img :src="ele" alt="" mode="widthFix">
                                </view>
                            </view>
                        </view>
                    </scroll-view>

                </view>
            </view>
        </van-popup>
    </view>
</template>
<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: () => false
        }
    },
    data () {
        return {
            date: '',
            title: 'Hello',
            pics:[  'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge01.png',
            'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/judge03.png']
        }
    },
    onReady () {

    },
    methods: {

        // 关闭弹窗
        closePopup () {
            this.$emit('closePopup')
        },

        onClick (index, e, item) {

        },
       
    }
}
</script>
<style lang="scss" scoped>
// 最外层
.content {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	// height: 100vh;
	// height: calc(100vh - 50px);
	overflow-y: auto;
	z-index: -2;
	// background-size: 100%;
	scrollbar-width: none; /* 针对Firefox */
}

// 滚动
.scroll-content {
    flex: 1;
    height:1px;
    // height: 100vh;
    // overflow: hidden;
}
// 提示框
.popup-content {
    display: flex;
	flex-direction: column;
	box-sizing: border-box;
    padding: 24px;
    border-radius: 16px;
    overflow: hidden;
    // height:100vh;
    height: 100%;

    .popup-main{
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        height: 100%;
        padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
    }
    .title{
        font-size: 20px;
        color: #111111;
        line-height: 20px;
    }
    .judgeContent{
        margin-top: 20px;

        .judgeDate{
            font-size: 24rpx;
            line-height: 24rpx;
            text-align: left;
            color: #888888; 
        }
        .judgeDetailText{
            margin-top: 28rpx;
            color: #888888;
            font-size: 24rpx;
            text-align: left;
        }
        .judgePics{
            margin-top: 36rpx;
            display: flex;
            height: 136rpx;

            .judge_img_item {
                width: calc((100% - 36rpx)/3);
                margin-right: 18rpx;
            }

            .judge_img_item:last-child {
                margin-right: 0rpx;
            }

            img {
                width: 100%;
                height: auto;
            }
        }
    }

}

.number{
    padding-bottom: 20px;
}

.l20 {
    margin-left: 20px;
}

.r13 {
    margin-right: 13px;
}

.r8 {
    margin-right: 8px;
}

.my-goods-action {
 .van-goods-action-button {
    color: green;
    background-color: orange;
  }
}

</style>
